<template>
    <div class="bodycontent">
        <div class="content">
            <div>
                
            </div>
        </div>
        <ul class="about">
            <li class="self">
                <div class="myAvatar"></div>
                <div class="name">Conquer_Solitude</div>
                <div class="motto">庸碌者身陷人际关系的囚牢，而清醒者只与自己赛跑</div><!-- 座右铭 -->
                <div class="introduce">
                    <div style="border-right: 1px solid black;">
                        <p style="margin-bottom: 5px;">0</p>
                        <p>文章数</p>
                    </div>
                    <div>
                        <p style="margin-bottom: 5px;">0</p>
                        <p>评论数</p>
                    </div>
                </div>
                <div class="link">
                    <a href="https://gitee.com/happy-state" target="_blank">
                        <img src="https://oss.littlestrange.site/conquer/image/gitee.jpg" alt="码云" title="gitee">
                    </a>
                    <a href="https://steamcommunity.com/profiles/76561199528374631/" target="_blank">
                        <img src="https://oss.littlestrange.site/conquer/image/steam.jpg" alt="码云" title="steam">
                    </a>
                    <a href="https://github.com/Conquer-Solitude" target="_blank">
                        <img src="https://oss.littlestrange.site/conquer/image/github.jpg" alt="码云" title="github">
                    </a>
                </div>
            </li>
            <li class="inspirational">
                <!-- <img src="../../image/qianbi.png" alt="" > -->
                <span>每日鸡汤</span>
                <img src="https://oss.littlestrange.site/conquer/image/huanyihuan.png" alt="" title="换一换" v-on:click="change" style="cursor: pointer;">
                <br>
                <p>{{ text }}</p>
            </li>
            <li class="time">
                <div class="text">电子时钟</div>
                <div class="date">
                    {{ date }}
                </div>
                <div class="colock">
                    {{ time }}
                </div>
            </li>
        </ul>
    </div>
</template>
<script setup>
import "../css/body.css";
import "../css/rollIma.css"
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
// import "../js/roll.ts"

var text = ref("");

function change() {
    // console.log("change");
    // 向https://yy.kuailemao.xyz/?c=a&c=j&encode=json这个网址发送请求
    fetch("https://yy.kuailemao.xyz/?c=a&c=j&encode=json")
        .then(res => res.json())
        .then(data => {
            console.log(data.hitokoto);
            text.value = data.hitokoto;
        })
}
change();
// 时间
var date = ref("");
var time = ref("");
setInterval(getTime, 1000)
function getTime() {
    var d = new Date();
    date.value = d.getFullYear() + "年"//+(d.getMonth()+1)+"月"+d.getDate()+"日";
    if (d.getMonth() < 9) {
        date.value += "0" + (d.getMonth() + 1) + "月";
    } else {
        date.value += (d.getMonth() + 1) + "月";
    }
    if (d.getDate() < 10) {
        date.value += "0" + d.getDate() + "日";
    } else {
        date.value += d.getDate() + "日";
    }
    if (d.getHours() < 10) {
        time.value = "0" + d.getHours() + ":";
    } else {
        time.value = d.getHours() + ":";
    }
    if (d.getMinutes() < 10) {
        time.value += ("0" + d.getMinutes() + ":");
    } else {
        time.value += d.getMinutes() + ":";
    }
    if (d.getSeconds() < 10) {
        time.value += ("0" + d.getSeconds());
    } else {
        time.value += d.getSeconds();
    }
}
getTime();
</script>
